<template>
  <Sidebar ref="sidebar" :title="$t('message.xmindMap.nodeStyle')" @close="close">
    <div class="styleBox"
    v-if="activeNodes.length > 0">
      <el-tabs class="tab" v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane :label="$t('message.xmindMap.normalcy')" name="normal"></el-tab-pane>
        <el-tab-pane :label="$t('message.xmindMap.checkedState')" name="active"></el-tab-pane>
      </el-tabs>
      <div class="sidebarContent" v-if="activeNodes.length > 0">
        <!-- 文字 -->
        <div class="title noTop">{{$t('message.xmindMap.characters')}}</div>
        <div class="row">
          <div class="rowItem">
            <span class="name">{{$t('message.xmindMap.font')}}</span>
            <el-select
              size="mini"
              v-model="style.fontFamily"
              placeholder=""
              :disabled="checkDisabled('fontFamily')"
              @change="update('fontFamily')"
            >
              <el-option
                v-for="item in fontFamilyList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
                :style="{ fontFamily: item.value }"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="row">
          <div class="rowItem">
            <span class="name">{{$t('message.text.fontSize')}}</span>
            <el-select
              size="mini"
              style="width: 80px"
              v-model="style.fontSize"
              placeholder=""
              :disabled="checkDisabled('fontSize')"
              @change="update('fontSize')"
            >
              <el-option
                v-for="item in fontSizeList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <div class="rowItem">
            <span class="name">{{$t('message.xmindMap.rowHeight')}}</span>
            <el-select
              size="mini"
              style="width: 80px"
              v-model="style.lineHeight"
              placeholder=""
              :disabled="checkDisabled('lineHeight')"
              @change="update('lineHeight')"
            >
              <el-option
                v-for="item in lineHeightList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="row">
          <div class="btnGroup">
            <el-tooltip :content="$t('message.xmindMap.colour')" placement="bottom" effect="light">
              <div class="styleBtn" v-popover:popover :class="{ disabled: checkDisabled('color') }">
                A
                <span
                  class="colorShow"
                  :style="{ backgroundColor: style.color || '#eee' }"
                ></span>
              </div>
            </el-tooltip>
            <el-tooltip :content="$t('message.xmindMap.bold')" placement="bottom" effect="light">
              <div
                class="styleBtn"
                :class="{ actived: style.fontWeight === 'bold', disabled: checkDisabled('fontWeight') }"
                @click="toggleFontWeight"
              >
                B
              </div>
            </el-tooltip>
            <el-tooltip :content="$t('message.xmindMap.italic')" placement="bottom" effect="light">
              <div
                class="styleBtn i"
                :class="{ actived: style.fontStyle === 'italic', disabled: checkDisabled('fontStyle') }"
                @click="toggleFontStyle"
              >
                I
              </div>
            </el-tooltip>
            <el-tooltip :content="$t('message.xmindMap.scribe')" placement="bottom" effect="light">
              <el-popover ref="popover2" placement="bottom" trigger="click" :disabled="checkDisabled('textDecoration')" width="240">
                <el-radio-group
                  size="small"
                  v-model="style.textDecoration"
                  @change="update('textDecoration')"
                >
                  <el-radio-button label="none">{{$t('message.xmindMap.null')}}</el-radio-button>
                  <el-radio-button label="underline">{{$t('message.xmindMap.underline')}}</el-radio-button>
                  <el-radio-button label="line-through">{{$t('message.xmindMap.strike')}}</el-radio-button>
                  <el-radio-button label="overline">{{$t('message.xmindMap.overline')}}</el-radio-button>
                </el-radio-group>
                <template  #reference>
                  <div
                  class="styleBtn u"
                  :style="{ textDecoration: style.textDecoration || 'none' }"
                  :class="{ disabled: checkDisabled('textDecoration') }"
                >
                  U
                </div>
                </template>
              </el-popover>
            </el-tooltip>
          </div>
          <el-popover ref="popover" placement="bottom" trigger="click" :disabled="checkDisabled('color')">
            <Color :color="style.color" @change="changeFontColor"></Color>
          </el-popover>
          
        </div>
        <!-- 边框 -->
        <div class="title">{{$t('message.xmindMap.frame')}}</div>
        <div class="row">
          <div class="rowItem">
            <span class="name">{{$t('message.xmindMap.colour')}}</span>
            <el-popover ref="popover3" placement="bottom" trigger="click" :disabled="checkDisabled('borderColor')" popper-class="color-popover-box" width="260">
              <Color
                :color="style.borderColor"
                @change="changeBorderColor"
              ></Color>
              <template  #reference>
                <span
                  class="block"
                  :style="{ width: '80px', backgroundColor: style.borderColor }"
                  :class="{ disabled: checkDisabled('borderColor') }"
                ></span>
              </template>
            </el-popover>
          </div>
          <div class="rowItem">
            <span class="name">{{$t('message.xmindMap.styles')}}</span>
            <el-select
              size="mini"
              style="width: 80px"
              v-model="style.borderDasharray"
              placeholder=""
              :disabled="checkDisabled('borderDasharray')"
              @change="update('borderDasharray')"
            >
              <el-option
                v-for="item in borderDasharrayList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="row">
          <div class="rowItem">
            <span class="name">{{$t('message.text.width')}}</span>
            <el-select
              size="mini"
              style="width: 80px"
              v-model="style.borderWidth"
              placeholder=""
              :disabled="checkDisabled('borderWidth')"
              @change="update('borderWidth')"
            >
              <el-option
                v-for="item in borderWidthList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <div class="rowItem">
            <span class="name">{{$t('message.xmindMap.fillet')}}</span>
            <el-select
              size="mini"
              style="width: 80px"
              v-model="style.borderRadius"
              placeholder=""
              :disabled="checkDisabled('borderRadius')"
              @change="update('borderRadius')"
            >
              <el-option
                v-for="item in borderRadiusList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 背景 -->
        <div class="title">{{$t('message.xmindMap.background')}}</div>
        <div class="row">
          <div class="rowItem">
            <span class="name">{{$t('message.xmindMap.colour')}}</span>
            <el-popover ref="popover4" placement="bottom" trigger="click" :disabled="checkDisabled('fillColor')" popper-class="color-popover-box" width="260">
              <Color
                :color="style.fillColor"
                @change="changeFillColor"
              ></Color>
              <template  #reference>
                <span
                  class="block"
                  :style="{ backgroundColor: style.fillColor }"
                  :class="{ disabled: checkDisabled('fillColor') }"
                ></span>
              </template>
            </el-popover>
          </div>
        </div>
        <!-- 形状 -->
        <div class="title">{{$t('message.xmindMap.shape')}}</div>
        <div class="row">
          <div class="rowItem">
            <span class="name">{{$t('message.xmindMap.shape')}}</span>
            <el-select
              size="mini"
              style="width: 120px"
              v-model="style.shape"
              placeholder=""
              :disabled="checkDisabled('shape')"
              @change="update('shape')"
            >
              <el-option
                v-for="item in shapeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 线条 -->
        <div class="title">{{$t('message.text.line')}}</div>
        <div class="row">
          <div class="rowItem">
            <span class="name">{{$t('message.xmindMap.colour')}}</span>
            <el-popover ref="popover5" placement="bottom" trigger="click" :disabled="checkDisabled('lineColor')" popper-class="color-popover-box" width="260">
              <Color
                :color="style.lineColor"
                @change="changeLineColor"
              ></Color>
              <template  #reference>
                <span
                  class="block"
                  :style="{ width: '80px', backgroundColor: style.lineColor }"
                  :class="{ disabled: checkDisabled('lineColor') }"
                ></span>
              </template>
            </el-popover>
          </div>
          <div class="rowItem">
            <span class="name">{{$t('message.xmindMap.styles')}}</span>
            <el-select
              size="mini"
              style="width: 80px"
              v-model="style.lineDasharray"
              placeholder=""
              :disabled="checkDisabled('lineDasharray')"
              @change="update('lineDasharray')"
            >
              <el-option
                v-for="item in borderDasharrayList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="row">
          <div class="rowItem">
            <span class="name">{{$t('message.text.width')}}</span>
            <el-select
              size="mini"
              style="width: 80px"
              v-model="style.lineWidth"
              placeholder=""
              :disabled="checkDisabled('lineWidth')"
              @change="update('lineWidth')"
            >
              <el-option
                v-for="item in borderWidthList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 节点内边距 -->
        <div class="title noTop">{{$t('message.xmindMap.nodeInnerMargin')}}</div>
        <div class="row">
          <div class="rowItem">
            <span class="name">{{$t('message.xmindMap.horizontal')}}</span>
            <el-slider
              style="width: 200px"
              v-model="style.paddingX"
              :disabled="checkDisabled('paddingX')"
              @change="update('paddingX')"
            ></el-slider>
          </div>
        </div>
        <div class="row">
          <div class="rowItem">
            <span class="name">{{$t('message.xmindMap.vertical')}}</span>
            <el-slider
              style="width: 200px"
              v-model="style.paddingY"
              :disabled="checkDisabled('paddingY')"
              @change="update('paddingY')"
            ></el-slider>
          </div>
        </div>
      </div>
    </div>
    <div class="tipBox" v-else>
      <div class="tipIcon xmind-iconfont icontianjiazijiedian"></div>
      <div class="tipText">{{$t('message.xmindMap.selectNode')}}</div>
    </div>
  </Sidebar>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  nextTick,
  getCurrentInstance
} from 'vue' 
import type { ComponentInternalInstance } from 'vue'
import { useRouter } from "vue-router"
import Sidebar from "./Sidebar.vue";
import Color from "./Color.vue";
import {
  fontFamilyList,
  fontSizeList,
  borderWidthList,
  borderDasharrayList,
  borderRadiusList,
  lineHeightList,
  shapeList,
} from "./config/index.js";
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { supportActiveStyle } from './themes/default';
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  propData: {
    type: String,
    default: ''
  },
  activeSidebar:String
})
const activeNodes = ref([])
const activeTab = ref("normal")
const style = ref({
  shape: '',
  paddingX: 0,
  paddingY: 0,
  color: "",
  fontFamily: "",
  fontSize: "",
  lineHeight: "",
  textDecoration: "",
  fontWeight: "",
  fontStyle: "",
  borderWidth: "",
  borderColor: "",
  fillColor: "",
  borderDasharray: "",
  borderRadius: "",
  lineColor: "",
  lineDasharray: "",
  lineWidth: "",
})
const activeNodeData = ref({})
const sidebar = ref()
watch(()=>props.activeSidebar,(newV,oldV)=>{
  if (newV === 'nodeStyle') {
    sidebar.value.show = true
  } else {
    sidebar.value.show = false
  }
})
onMounted(()=>{
  proxy.$eventBus.$on("node_active", (...args) => {
  // if (sidebar.value) sidebar.value.show = false;
    nextTick(() => {
      activeTab.value = "normal";
      activeNodes.value = args[1];
      if(args[0]?.uid || args[0]?.uid==0){
        activeNodeData.value.uid = args[0]?.uid
        activeNodeData.value.isShow = true
      }
      if (sidebar.value) {
        // sidebar.value.show = activeNodes.value.length > 0;
        activeNodeData.value.isShow = activeNodes.value.length > 0
      }
      initNodeStyle();
    });
  });
  // 如果样式被关闭且在打开当前node的时候
  proxy.$eventBus.$on("node_click",(...args)=>{
    if(args[0]?.uid==activeNodeData.value?.uid && (activeNodeData.value?.uid || activeNodeData.value?.uid ==0) && !activeNodeData.value.isShow ){
      proxy.$eventBus.$emit("changeSidebar", 'nodeStyle');
      // if (sidebar.value) sidebar.value.show = false;
      // nextTick(()=>{
      //   if(sidebar.value) sidebar.value.show = true
      // })
    }
  })
})
function close(){
  activeNodeData.value.isShow = false
}
function handleTabClick() {
  initNodeStyle();
}
function checkDisabled(prop) {
  return activeTab.value === 'active' && !supportActiveStyle.includes(prop)
}
function initNodeStyle() {
  if (activeNodes.value.length <= 0) {
    activeTab.value = "normal";
    return;
  }
  [
    "shape",
    "paddingX",
    "paddingY",
    "color",
    "fontFamily",
    "fontSize",
    "lineHeight",
    "textDecoration",
    "fontWeight",
    "fontStyle",
    "borderWidth",
    "borderColor",
    "fillColor",
    "borderDasharray",
    "borderRadius",
    "lineColor",
    "lineDasharray",
    "lineWidth",
  ].forEach((item) => {
    style.value[item] = activeNodes.value[0].getStyle(
      item,
      false,
      // activeTab.value === "active"
    );
  });
}
function update(prop) {
  activeNodes.value.forEach((node) => {
    node.setStyle(prop, style.value[prop], activeTab.value === "active");
  });
}
function toggleFontWeight() {
  if (style.value.fontWeight === "bold") {
    style.value.fontWeight = "normal";
  } else {
    style.value.fontWeight = "bold";
  }
  update("fontWeight");
}
function toggleFontStyle() {
  if (style.value.fontStyle === "italic") {
    style.value.fontStyle = "normal";
  } else {
    style.value.fontStyle = "italic";
  }
  update("fontStyle");
}
function changeFontColor(color) {
  style.value.color = color;
  update("color");
}
function changeBorderColor(color) {
  style.value.borderColor = color;
  update("borderColor");
}
function changeLineColor(color) {
  style.value.lineColor = color;
  update("lineColor");
}
function changeFillColor(color) {
  style.value.fillColor = color;
  update("fillColor");
}
</script>
<style lang="scss" scoped>
.styleBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .tab {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0 20px;
  }
}

.tipBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666;

  .tipIcon {
    font-size: 100px;
  }
}

.sidebarContent {
  padding: 20px;
  padding-top: 10px;
  @include fontFamily;

  .title {
    @include fontFamily;
    font-size: 16px;
    font-weight: 500;
    color: rgba(26, 26, 26, 0.9);
    margin-bottom: 10px;
    margin-top: 20px;

    &.noTop {
      margin-top: 0;
    }
  }

  .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .btnGroup {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    .rowItem {
      display: flex;
      align-items: center;

      .name {
        font-size: 12px;
        margin-right: 10px;
      }

      .block {
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        cursor: pointer;

        &.disabled {
          background-color: #F5F7FA !important;
          border-color: #E4E7ED !important;
          color: #C0C4CC !important;
          cursor: not-allowed !important;
        }
      }
    }

    .styleBtn {
      position: relative;
      width: 50px;
      height: 30px;
      background: #fff;
      border: 1px solid #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      cursor: pointer;
      border-radius: 4px;

      &.actived {
        background-color: #eee;
      }

      &.disabled {
        background-color: #F5F7FA !important;
        border-color: #E4E7ED !important;
        color: #C0C4CC !important;
        cursor: not-allowed !important;
      }

      &.i {
        font-style: italic;
      }

      &.u {
      }

      .colorShow {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
      }
    }
  }
}
</style>